<template>
  <div class="todo-list">
    <!-- 循环展示多条todoItem -->
    <todo-list-item
      v-for="todo in todos"
      :key="todo.id"
      :todoItem="todo"
      @changeState="todo.completed = $event.target.checked"
    ></todo-list-item>
  </div>
</template>

<script>
import TodoListItem from "@/components/TodoListItem.vue";
export default {
  name: "TodoList",
  props: ["todos"],
  components: {
    TodoListItem,
  },
};
</script>

<style>
.todo-list {
  display: grid;
  row-gap: 14px;
}
</style>